<template>
    <h1>地址列表</h1>
    <el-table :data="addresslist" style="width: 100%">
    <el-table-column prop="userid" label="地址编号" width="180" />
    <el-table-column prop="name" label="名字" width="100" />
    <el-table-column prop="tel" label="手机号" width="180" />
    <el-table-column prop="province" label="省份" width="100" />
    <el-table-column prop="city" label="城市" width="100" />
    <el-table-column prop="county" label="县/区" width="100" />
    <el-table-column prop="addressDetail" label="地址详细信息" width="180" /> 
    <el-table-column label="是否启用" width="100">
        <template #default="scope">
        <el-switch
          v-model="scope.row.isDefault"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
      </template> 
    </el-table-column>
    <el-table-column prop="addressid" label="地址编号" width="180" /> 
  </el-table>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { admin_address_list } from "../../../utils/api";
interface Iaddress {
    userid: string;
    name: string;
    tel: string;
    province: string;
    city: string;
    county: string;
    addressDetail: string;
    isDefault: boolean;
  addressid: string;
}
// 1、定义地址数据
let addresslist = reactive<Iaddress[]>([]);
// 2、获取所有的地址数据
admin_address_list({}).then((res: any) => {
  if (res.data.code === "200") {
    addresslist.push(...res.data.data);
  }
});
</script>

<style scoped>

</style>